<template>
  <view class="lite-search">
    <view class="lite-search__content">
      <view class="lite-search__input-wrapper">
        <input 
          class="lite-search__input"
          type="text"
          :value="value"
          :placeholder="placeholder"
          @input="handleInput"
          @confirm="handleConfirm"
          @focus="handleFocus"
          @blur="handleBlur"
        />
        <view class="lite-search__action" @click="handleSearch">
          <slot name="right">
            <text class="action-text">{{ actionText }}</text>
          </slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LiteSearch',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    actionText: {
      type: String,
      default: '搜索'
    },
    animation: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleInput(e) {
      this.$emit('input', e.detail.value)
    },
    handleConfirm(e) {
      this.$emit('search', e.detail.value)
    },
    handleFocus(e) {
      this.$emit('focus', e)
    },
    handleBlur(e) {
      this.$emit('blur', e)
    },
    handleSearch() {
      this.$emit('search', this.value)
      this.$emit('custom', this.value)
    }
  }
}
</script>

<style scoped>
.lite-search {
  padding: 8px 16px;
}

.lite-search__content {
  position: relative;
}

.lite-search__input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 20px;
  padding: 0 16px;
  min-height: 36px;
}

.lite-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #333333;
  padding: 8px 0;
}

.lite-search__input::placeholder {
  color: #999999;
}

.lite-search__action {
  margin-left: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.action-text {
  font-size: 14px;
  color: #007bff;
}
</style>